class CanvasHelper {
    constructor(cvs, ctx) {
        const offsetLeft = cvs.offsetLeft;
        const offsetTop = cvs.offsetTop;

        const cursorPointer = document.createElement('div');
        cursorPointer.innerText = ''
        cursorPointer.style.position = 'absolute';
        cursorPointer.style.left = 0;
        cursorPointer.style.top = 0;
        document.body.appendChild(cursorPointer)
        
        cvs.addEventListener('mouseenter', e => {
            cursorPointer.style.display = 'block';
        })

        cvs.addEventListener('mousemove', e => {
            cursorPointer.innerText = `(${e.offsetX}, ${e.offsetY})`;
            // +10 是为了不让字和鼠标指针重合
            cursorPointer.style.transform = 
                `translate(${e.offsetX + offsetLeft + 10}px, ${e.offsetY + offsetTop + 10}px)`; 
        })

        cvs.addEventListener('mouseout', e => {
            cursorPointer.style.display = 'none';
        })
    }
}


if (window) {
    window.CanvasHelper = CanvasHelper
}